{% extends 'layout/base01.html' %}


<!--
继承模板后需要修改的地方:
1. 标题
2. 内容 --- 表单
3. 样式 ---- CSS
4. Script --- 事件
-->

<!-- 添加自己页面的内容 -->
<!-- 修改标题 -->
{% block title %}
    用户注册
{% endblock %}

<!-- 修改样式 -->
{% block css %}
    <style>
        #regForm {
            width: 500px;
            margin: 40px auto;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            padding: 30px;
            border-radius: 20px;
        }

        .error_msg {
            color: red;
            position: absolute;
        }
    </style>
{% endblock %}

<!-- 修改内容 -->
{% block content %}
    <form id="regForm" action="{% url 'demo' %}" method="post" novalidate>
        {% csrf_token %}
        <h1 style="text-align: center">用户测试表单</h1>
        <hr>
        <!-- 通过form对象快速生成表单 -->
        {% for field in form %}

            <div class="form-group">
                <label for="{{ field.id_for_label }}">{{ field.label }}:</label>
                {{ field }} <!-- 添加一个属性 class="form-control" -->
                <span class="error_msg"></span>
            </div>

        {% endfor %}
        <div style="margin-top: 30px">
            <input id="btnSubmit" type="button" class="btn btn-primary" style="width: 120px" value="提交">
            <a href="{% url 'login' %}" style="margin-left: 20px">账号登陆？</a>
            <a href="{% url 'sms_login' %}" style="margin-left: 10px">验证码登陆？</a>
            <a href="{% url 'resetpassword' %}" style="margin-left: 10px">忘记密码？</a>
        </div>

    </form>
{% endblock %}

<!-- 修改Script -->
{% block js %}
    <script>
        // 入口函数
        $(function () {
            // # 响应提交按钮！
            $('#btnSubmit').click(function () {
                //===Ajax=====
                $.ajax({
                    url: "{% url 'demo' %}",
                    method: 'post',
                    data: $('#regForm').serialize(),
                    dataType: 'json',
                    success: function (res) {
                        console.log(res);
                        if(!res.status){
                            $.each(res.errors, function (key,value) {
                                $('#id_' + key).next().text(value[0]);
                            })
                        }
                    }
                })
            });
        });

    </script>
{% endblock %}

